<template>
	<div class="login-wrap">
		<div class="ms-login">
			<div class="ms-title">后台管理系统</div>


			<el-form :model="param" :rules="rules" ref="login" v-if="isLogin" label-width="60px" class="ms-content">
				<el-form-item prop="username" label="邮箱">
					<el-input v-model="param.email" placeholder="请输入邮箱">
					</el-input>
				</el-form-item>
				<el-form-item prop="password" label="密码">
					<el-input
						type="password"
						placeholder="请输入密码"
						show-password
						v-model="param.password"
						@keyup.enter="submitForm(login)"
					>

					</el-input>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitForm(login)">登录</el-button>
				</div>
				<p class="login-tips" cursor-pointer @click="isLogin = false">立即注册</p>
			</el-form>
			<el-form :model="registerParams" :rules="rules" v-else ref="registerRef" label-width="100px" label-position="left" class="ms-content">
				<el-form-item prop="email" label="邮箱" required >
					<el-input v-model="registerParams.email" placeholder="请输入邮箱">
					</el-input>
				</el-form-item>
				<el-form-item prop="password" label="密码">
					<el-input
						type="password"
						placeholder="请输入密码"
						show-password
						v-model="registerParams.password"
					>

					</el-input>
				</el-form-item>
				<el-form-item prop="validPassword" label="确认密码">
					<el-input
						type="password"
						show-password
						placeholder="请输入密码"
						v-model="registerParams.validPassword"
					>

					</el-input>
				</el-form-item>
				<el-form-item prop="emailValidCode" label="邮箱验证码">
					<div flex flex-items-center>
						<el-input
							placeholder="请输入验证码"
							class="mr-2"
							v-model="registerParams.emailValidCode"
						>
						</el-input>
						<el-button type="primary" size="small" @click="handleSendEmailCode" :loading="loading">
							<template #loading>
								{{ timeout }}s后
							</template>
							发送验证码
						</el-button>
					</div>
				</el-form-item>
				<div class="login-btn">
					<el-button type="primary" @click="submitRegisterForm(registerRef)">注册</el-button>
				</div>
				<p class="login-tips">Tips : 用户名和密码随便填。</p>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { loginPC, registerPC,sendEmailCode } from '@/api/login';
import { useTagsStore } from '@/store/tags';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import storage from '@/utils/storage'
import { getUserInfo } from '@/api/user';
import { validateEmail } from '@/utils/validate';
import { useUserStore } from '@/store/user';

interface LoginInfo {
	email: string;
	password: string;
}

const router = useRouter();
let isLogin = ref(true)
let timeout = ref(10)
let loading = ref(false)
let emailTimer = ref()
const param = reactive<LoginInfo>({
	email: 'yechuan66@gmail.com',
	password: ''
});

const registerParams = reactive({
	emailValidCode: '',
	email: '',
	password: '',
	validPassword: ''
})

const rules: FormRules = {
	email: [
		{
			required: true,
			message: '请输入邮箱',
			trigger: 'blur'
		}
	],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	validPassword: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
	emailValidCode: [{ required: true, message: '请输入邮箱验证码', trigger: 'blur' }],
};
const login = ref<FormInstance>();
const registerRef = ref<FormInstance>();
const userStore = useUserStore()
onUnmounted(() => {
	initTimer()	
})

const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (valid) {
			loginPC(param).then(async (result) => {
				ElMessage.success('登录成功');
				storage.setItem('token',result.data.token)
				userStore.refreshUserInfo()
				router.push('/user');
			});
		} else {
			return false;
		}
	});
};
const submitRegisterForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid: boolean) => {
		if (valid) {
			registerPC(registerParams).then(async (result) => {
				ElMessage.success('注册成功');
				isLogin.value = true
			});
		} else {
			return false;
		}
	});
};
const handleSendEmailCode = () => {
	loading.value = true
	const payload = {
		email: registerParams.email
	}
	if (!validateEmail(null,payload.email)) {
		ElMessage.error('请输入邮箱地址')
		return
	}
	emailTimer.value = setInterval(() => {
		
		if (timeout.value > 0) {
			timeout.value--
		} else {
			initTimer()
		}
	},1000)
	sendEmailCode(payload).then((result) => {
		ElMessage.success(result.data)
	});
}

const initTimer = () => {
	clearInterval(emailTimer.value)
	loading.value = false
	timeout.value = 10
}

const tags = useTagsStore();
tags.clearTags();
</script>

<style scoped>
.login-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	background-image: url(@/assets/img/login-bg.jpg);
	background-size: 100%;
}
.ms-title {
	width: 100%;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	color: #fff;
	border-bottom: 1px solid #ddd;
}
.ms-login {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 400px;
	margin: -190px 0 0 -175px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.3);
	overflow: hidden;
}
.ms-content {
	padding: 30px 30px;
}
.login-btn {
	text-align: center;
}
.login-btn button {
	width: 100%;
	height: 36px;
	margin-bottom: 10px;
}
.login-tips {
	font-size: 12px;
	line-height: 30px;
	color: #fff;
}
</style>
